import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, message, Select, Spin } from 'antd';

const FormItem = Form.Item;
const tagsList = [
    { label: '工作', id: 1 },
    { label: '学习', id: 2 },
    { label: '生活', id: 3 },
    { label: '博客', id: 4 },
]
// 指标类型管理-新建
export default function CustomSelect(props) {
    let { key, style, record } = props
    let { tags } = record;
    console.log(tags)
    const tagsArr = JSON.parse(tags) || [];
    const selected = tagsArr;

    // let { visible, onCancel, data } = props;
    // let { selected, tagsArr = [] } = data || {};
    console.log(props, tagsArr)

    const [modularText, setModularText] = useState('');

    let filterIndex = tagsArr.filter((name) => {
        let patt = new RegExp(modularText, 'i');
        return patt.test(name);
    });

    return (
        <Select
            style={style}
            placeholder={'请选择'}
            // showArrow
            showSearch
            mode="multiple"
            defaultValue={selected}
            filterOption={(value, option) => {
                let { value: name, notCheck } = option.props;
                let patt = new RegExp(value, 'i');
                if (notCheck) {
                    return true;
                }
                return patt.test(name);
            }}
            onSearch={(value) => {
                setModularText(value)
            }}
            onChange={(array) => {
                console.log(array)
            }}
        >
            {
                // modularText && filterIndex.lenght === 0
                modularText
                    ? <Select.Option
                        key={modularText}
                        value={modularText}
                        title={modularText}
                        notCheck={true}
                    ><span style={{ color: '#bdbdbd' }}>新增指标类型：</span><span style={{ color: '#03a9f4' }}>{modularText}</span></Select.Option>
                    : ''
            }
            {
                tagsList.map((name, index) => {
                    return <Select.Option key={index} value={name.id} title={name.label}>{name.label}</Select.Option>;
                })
            }
        </Select>
    );
}